<template>
  <div>
    <h1>添加房型</h1>
    <table class="table table-borderes">
      <tbody>
        <tr>
          <td>房型名称</td>
          <td><input type="text" v-model="state.name"/></td>
        </tr>
        <tr>
          <td>房型面积</td>
          <td><input type="text" v-model="state.size"/></td>
        </tr>
        <tr>
          <td>价格</td>
          <td><input type="text" v-model="state.price"/></td>
        </tr>
        <tr>
          <td>是否有窗</td>
          <td>
            <input type="radio" :value="true"  v-model="state.windes"/>有
            <input type="radio" :value="false" v-model="state.windes"/>无
          </td>
        </tr>
        <tr>
          <td>入住人数</td>
          <td><input type="text" v-model="state.num"/></td>
        </tr>
        <tr>
          <td>状态</td>
          <td>
            <input type="radio" :value="true" v-model="state.state"/>启用
            <input type="radio" :value="false" v-model="state.state"/>禁用
          </td>
        </tr>
        <tr>
          <td>图片</td>
          <td>
            <img :src="state.img" alt="" width="60" height="60" />
            <input type="file" @change="fileChange"/>
          </td>
        </tr>
        <tr>
          <td></td>
          <td><input type="button" value="添加" @click="ok"/></td>
        </tr>
      </tbody>
    </table>
  </div>
</template>

<script setup lang="ts">
import axios from 'axios'
import{reactive,toRefs,onMounted} from 'vue'
import {ref} from 'vue'
import { useRouter,useRoute } from 'vue-router'

const router = useRouter()
const route= useRoute()

let obj=reactive({
  state:{
  name: '',
  size: '',
  price: '',
  windes: true,
  num: '',
  state: true,
  img: '',
  }
})
let {state}=toRefs(obj)





//上传图片
const file =ref(null);
const fileChange = (e: any) => {
  
   file.value = e.target.files[0];
   const formData = new FormData();
   if(!file.value){
      alert('请选择图片')
      return;
   }
   formData.append('file',file.value);
   axios({
     url:'https://localhost:7017/api/File/FileUplod',
     method:'post',
     data:formData
   })
   .then((res)=>{
     console.log(res);
     state.value.img = res.data;
   })
   .catch((err)=>{
     console.log(err);
   })
  
    
}


//添加
const ok=()=>{

  if(state.value.name==''){
  alert('房型名称不能为空');
  return;
  }
   if(state.value.size==''){
 alert('房型面积不能为空');
 return;
 }

   if(state.value.price==''){
 alert('房型价格不能为空');
 return;
 }
 if(state.value.num==''){
alert('入住人数不能为空');
return;
}

  let obj={
    name: state.value.name,
    size: state.value.size,
    price: state.value.price,
    windes: state.value.windes,
    num: state.value.num,
    state: state.value.state,
    img: state.value.img,
  }
  axios({
    url:'https://localhost:7017/api/RoomType/Add',
    method:'post',
    data:obj
  })
  .then((res)=>{
    console.log(res);
    if(res.data>0){
     alert('添加成功');
     router.push('/List');
    }
    else{
      alert('添加失败');
      return;
    }
  })
}


</script>

<style scoped></style>
